import React, { useEffect, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Select,
    Card,
    Switch,
    Pagination,
    message,
    Popconfirm
} from 'antd';

import "./Look.css"
import request from "../../utils/request";

const Look = () => {
    const { Option } = Select;
    const { Meta } = Card;
    const [lookList, setLook] = useState([]);
    const [arr, setarr] = useState([]);
    const [page, setpage] = useState(1);
    useEffect(() => {
        getter(1);
    }, [])
    const getter = (page) => {
        setpage(page);
        const res = request({
            url: "/api/GetLook",
            method: "get",
            params: {
                page,
            }
        })
        res.then(res => {
            if (res.code === 200) {
                setLook(res.data);
                setarr(res.arr);
            }
        })
    }

    //状态
    const State = async (text) => {
        let res = await request({
            url: "/api/stateLook",
            method: "put",
            data: {
                id: text.id,
                page,
            }
        })
        message.success(res.message);
        getter(page);
    }

    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/DeleteLook",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter(page);
    }

    const onFinish = async (values) => {
        setpage(1);
        if (!values.name) values.name = "";
        if (!values.state) values.state = "";
        let res = await request({
            url: '/api/searchLook',
            method: "get",
            params: {
                ...values,
                page
            }
        })
        if (res.code === 200) {
            setLook(res.data);
            setarr(res.arr);
        }
    }
    return (
        <div className="Look">
            <div className="LookHeader">
                直播管理
            </div>
            <div className="LookMain">
                <div className="LookTop">
                    <Form name="complex-form" onFinish={onFinish} >
                        <Form.Item
                            name="state"
                            label="直播状态:"
                        >
                            <Select
                                placeholder="请选择"
                            >
                                <Option value="">请选择</Option>
                                <Option value="1">直播中</Option>
                                <Option value="0">已结束</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="name"
                            label="经济人搜索:"
                        >
                            <Input placeholder="姓名、ID" />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Lookmain">
                    <div className="maintitle">
                        全部直播
                    </div>
                    <div className="mainLook">
                        <div className="List">
                            {
                                arr.map((item, index) => {
                                    return <div key={index}>
                                        <Card
                                            style={{ height: 200, border: 0 }}
                                            cover={<img alt="example" src={item.img} style={{ height: 120, }} />}
                                        >
                                            <Meta title={item.title} description={item.date} style={{ height: 80, }} />
                                        </Card>
                                        <div className="state">
                                            {
                                                item.state ? <Button type="link">进入直播</Button> : <Button type="link">回看</Button>
                                            }
                                            {
                                                item.state ? <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={item.type} onClick={() => State(item)} />
                                                    : <Popconfirm
                                                        title="是否要删除？请再次确定"
                                                        onConfirm={() => Delete(item)}
                                                        okText="Yes"
                                                        cancelText="No"
                                                    >
                                                        <Button type="link">删除</Button>
                                                    </Popconfirm>
                                            }
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                    <div className="page">
                        <Pagination
                            total={lookList.length}
                            showSizeChanger
                            showQuickJumper
                            onChange={(page) => { getter(page) }}
                            showTotal={total => `共 ${total} 页`}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Look
